<template>
  <div class="tas-main">
    <div class="detail-container">
      <sec-desc :column="3" colon :titleData="bodyInfoCol" :data="bodyInfoData" title="主体信息"></sec-desc>
      <sec-desc
        :column="3"
        colon
        :titleData="ownerInfoCol[this.$route.params.type]"
        :data="ownerInfoData"
        title="权属信息"
      >
        <template v-slot:leader="{ data }">
          <dc-user :name="data.data.leader"></dc-user>
        </template>
      </sec-desc>
      <sec-desc :column="3" colon :titleData="riskInfoCol" :data="riskInfoData" title="风险信息"></sec-desc>
      <div>
        <div class="sec-title">
          最新风险识别样例<el-tooltip
            effect="dark"
            content="由于工单处置后仍会定期识别风险，所以最新风险识别样例可能和工单中的样例不一致"
            placement="top"
          >
            <el-button
              type="text"
              style="margin-left: 5px; font-size: 16px; padding: 0"
              icon="el-icon-question"
            ></el-button>
          </el-tooltip>
        </div>
        <!-- API禁采项和弱密码 speAnaSamplesSource.includes(type) -->
        <sec-api-ana-samples
          :source="getParams().source"
          v-if="$route.params.source.includes('api-api-1') || ['databaseAudit'].includes(getParams().source)"
          :data="analysisSamples.tableData"
          :columns="analysisSamples.tableCol"
        >
        </sec-api-ana-samples>

        <sec-table
          v-else
          style="margin-bottom: 20px"
          :tableData="analysisSamples.tableData"
          :tableCol="analysisSamples.tableCol"
          ><template v-slot:giftUrl="{ data }"> <div v-html="data.row.giftUrl"></div> </template
        ></sec-table>
      </div>
      <sec-table :tableCol="tableCol" :tableData="tableData">
        <template v-slot:leader="{ data }">
          <dc-user :name="data.row.leader"></dc-user>
        </template>

        <template v-slot:operation="{ data }">
          <el-popover placement="left" width="400" trigger="click">
            <!-- API禁采项和弱密码 speAnaSamplesSource.includes(type) -->
            <sec-api-ana-samples
              v-if="$route.params.source.includes('api-api-1')"
              :data="riskAnaSamples.tableData"
              :columns="riskAnaSamples.tableCol"
            >
            </sec-api-ana-samples>

            <sec-table v-else :tableData="riskAnaSamples.tableData" :tableCol="riskAnaSamples.tableCol"></sec-table>
            <el-button type="text" slot="reference" style="margin-right: 5px" @click="getAnalysisSamples(data.row)"
              >识别样例</el-button
            >
          </el-popover>
          <el-button type="text" @click="handleCheckDetail(data.row)">工单记录</el-button>
        </template>
      </sec-table>
      <div class="opt-record" v-if="optRecord.tableData">
        <div class="sec-title">操作日志</div>
        <sec-table :tableData="optRecord.tableData" :tableCol="optRecord.tableCol"></sec-table>
      </div>
    </div>
    <el-drawer :with-header="false" :visible.sync="drawer" v-loading="drawerLoading" element-loading-text="正在加载...">
      <div class="log" style="padding: 0 15px">
        <el-timeline v-if="operationLog.length !== 0">
          <el-timeline-item
            v-for="(item, index) in operationLog"
            :key="index"
            :timestamp="item.user + ' ' + item.createTime"
            :color="nodeColor(item.operate)"
          >
            {{ item.data }}
          </el-timeline-item>
        </el-timeline>
        <div v-else class="none-log">暂无日志</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getGovernBaseInfo, getFeModelCfgList, getOrderGovernList, getAnalysisSamplesApi } from "api/riskCenterApi";
import { getWorkOrderLog } from "api/taskCenterApi";
import moment from "moment";
let ownerInfoCol = [
  { type: "slot", label: "归属人", prop: "leader" },
  { label: "业务线", prop: "businessLineName" },
  { label: "一级部门", prop: "dept0" },
  { label: "二级部门", prop: "dept1" },
  { label: "三级部门", prop: "dept2" },
  { label: "四级部门", prop: "dept3" },
];
export default {
  name: "Detail",
  components: {},
  data() {
    return {
      optRecord: {
        tableData: [],
        tableCol: [
          { label: "操作人", prop: "account" },
          { label: "操作时间", prop: "createTime" },
          { label: "操作", prop: "behavior" },
          { label: "备注", prop: "remark" },
        ],
      },
      //识别样例
      analysisSamples: {
        tableData: [],
        tableCol: [
          { label: "类型", prop: "category" },
          { label: "样例（已脱敏）", prop: "samples" },
        ],
      },
      //风险下的识别样例
      riskAnaSamples: {
        tableData: [],
        tableCol: [
          { label: "类型", prop: "category" },
          { label: "样例（已脱敏）", prop: "samples" },
        ],
      },
      //主体信息
      bodyInfoCol: [],
      bodyInfoData: {},
      //权属信息
      ownerInfoCol: {
        store: ownerInfoCol,
        "audit-api": ownerInfoCol,
        api: [
          { type: "slot", label: "前端归属人", prop: "" },
          { label: "业务线", prop: "" },
          { label: "一级部门", prop: "" },
          { label: "二级部门", prop: "" },
          { label: "三级部门", prop: "" },
          { label: "四级部门", prop: "" },

          { type: "slot", label: "后端归属人", prop: "leader" },
          { label: "业务线", prop: "businessLineName" },
          { label: "一级部门", prop: "dept0" },
          { label: "二级部门", prop: "dept1" },
          { label: "三级部门", prop: "dept2" },
          { label: "四级部门", prop: "dept3" },
        ],
      },

      ownerInfoData: {},
      //风险信息
      riskInfoCol: [
        { label: "风险ID", prop: "id" },
        { label: "风险类型", prop: "riskType" },
        { label: "风险分类", prop: "riskClass" },
        { label: "暴露次数", prop: "num" },
      ],
      riskInfoData: {},
      //风险表格
      tableData: [],
      tableCol: [
        { label: "暴露时间", prop: "createTimeText" },
        { label: "暴露方式", prop: "exposureWay" },
        { label: "明文类型", prop: "category" },
        { label: "工单ID", prop: "id" },
        { label: "工单状态", prop: "status" },
        { type: "slot", label: "治理人", prop: "leader" },
        { label: "风险更新时间", prop: "modifyTime" },
        { label: "风险状态", prop: "riskStatus" },
        { type: "slot", label: "操作", prop: "operation", fixed: "right" },
      ],
      //工单记录
      greenNode: ["创建工单", "完成工单"],
      redNode: ["关闭工单"],
      blueNode: ["转交", "申诉", "关单", "申诉结果", "验收结果", "关单结果"],
      operationLog: [],
      drawer: false,
      drawerLoading: false,
    };
  },
  created() {
    this.getDataInfoTitle();
    this.getGovernDetail();
    this.getOrderGovernList();
    this.getAnalysisSamples(); //识别样例
  },
  computed: {},
  methods: {
    getParams() {
      let { type, source } = this.$route.params;
      let { uniqueId } = this.$route.query;
      return { type, source, uniqueId };
    },
    getAnalysisSamples(row) {
      getAnalysisSamplesApi({ ...this.getParams(), processId: row?.processId || "" }).then((res) => {
        let data = res.data;
        data.columns.forEach((item) => {
          if (item.prop == "giftUrl") {
            item["type"] = "slot";
          }
        });
        if (row) {
          this.riskAnaSamples.tableData = data.list;
          this.riskAnaSamples.tableCol = data.columns;
        } else {
          this.analysisSamples.tableData = data.list;
          this.analysisSamples.tableCol = data.columns;
        }
      });
    },
    //主体信息 列
    getDataInfoTitle() {
      getFeModelCfgList({ ...this.getParams(), operateType: "1" }).then((res) => {
        let data = res.data;
        this.bodyInfoCol = data;
      });
    },

    getGovernDetail() {
      const loading = this.openLoading();
      getGovernBaseInfo(this.getParams()).then((res) => {
        console.log("[ res ] >", res);
        loading.close();
        const { dataInfo, ownershipInfo, riskInfo, riskOperateList } = res.data;
        this.bodyInfoData = dataInfo; //主体信息
        this.ownerInfoData = ownershipInfo;
        this.riskInfoData = riskInfo;
        this.optRecord.tableData = riskOperateList;
        riskOperateList?.forEach((item) => {
          item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
        });
      });
    },
    getOrderGovernList() {
      getOrderGovernList({ uniqueId: this.getParams().uniqueId }).then((res) => {
        this.tableData = res.data || [];
      });
    },
    handleCheckDetail(row) {
      this.drawer = true;
      this.drawerLoading = true;
      getWorkOrderLog({ processId: row.processId }).then((res) => {
        const { data } = res;
        this.operationLog = data;
        this.drawerLoading = false;
      });
    },
    nodeColor(data) {
      if (this.greenNode.includes(data)) {
        return "#0bbd87";
      } else if (this.redNode.includes(data)) {
        return "#FF0000";
      } else if (this.blueNode.includes(data)) {
        return "#0000FF";
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped>
.detail-container {
  padding: 10px 20px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.log {
  margin-top: 30px;
}
.none-log {
  text-align: center;
  color: #909399;
}
</style>
